<template>
  <el-card>
    <el-table :data="tableData" @expand-change="expand" :expand-row-keys="expendRow" :row-key="row => row.index" border style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="expand-content">
            <el-form-item label="用户名">
              <span>{{ props.row.user_name }}</span>
            </el-form-item>
            <el-form-item label="店铺名称">
              <span>{{ props.row.restaurant_name }}</span>
            </el-form-item>
            <el-form-item label="收货地址">
              <span>{{ props.row.address }}</span>
            </el-form-item>
            <el-form-item label="店铺 ID">
              <span>{{ props.row.restaurant_id }}</span>
            </el-form-item>
            <el-form-item label="店铺地址">
              <span>{{ props.row.restaurant_address }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column prop="id" label="订单ID"> </el-table-column>
      <el-table-column prop="total_amount" label="总价格"> </el-table-column>
      <el-table-column prop="status" label="订单状态"> </el-table-column>
    </el-table>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pagenum" :page-sizes="[20, 25, 30, 35, 40]" :page-size="limit" layout="total, sizes, prev, pager, next, jumper" :total="count"> </el-pagination>
  </el-card>
</template>

<script>
import request from '../api/axiosApi'
import { getOrderCount, getResturantDetail, getUserInfo, getAddressById } from '../api/index'
export default {
  data() {
    return {
      tableData: [],
      offset: 1,
      pagenum: 1,
      limit: 20,
      count: null,
      expendRow: []
    }
  },
  created() {
    this.initData()
  },
  methods: {
    async initData() {
      try {
        const { data: res } = await getOrderCount()
        if (res.status === 1) {
          this.count = res.count
        } else {
          throw new Error('获取数据失败')
        }
        this.getOrderInfo()
      } catch (error) {
        console.log(error)
      }
    },
    async getOrderInfo() {
      const { data: res } = await request.get(`/bos/orders?limit=${this.limit}&offset=${this.offset}`)
      console.log(res)
      res.forEach((item, index) => {
        const tableItme = {}
        tableItme.id = item.id
        tableItme.total_amount = item.total_amount
        tableItme.status = item.status_bar.title
        tableItme.user_id = item.user_id
        tableItme.restaurant_id = item.restaurant_id
        tableItme.address_id = item.address_id
        tableItme.index = index
        this.tableData.push(tableItme)
      })
    },
    async expand(row, status) {
      if (status) {
        const { data: restaurant } = await getResturantDetail(row.restaurant_id)
        const { data: userInfo } = await getUserInfo(row.user_id)
        const { data: addressInfo } = await getAddressById(row.address_id)
        this.tableData.splice(row.index, 1, { ...row, ...{ restaurant_name: restaurant.name, restaurant_address: restaurant.address, address: addressInfo.address, user_name: userInfo.username } })
        this.$nextTick(() => {
          this.expendRow.push(row.index)
        })
      } else {
        const index = this.expendRow.indexOf(row.index)
        this.expendRow(index, 1)
      }
    },
    handleSizeChange(pageSize) {
      this.limit = pageSize
      this.getOrderInfo()
    },
    handleCurrentChange(pageNum) {
      this.pagenum = pageNum
      this.offset = pageNum * this.limit
      this.getOrderInfo()
    }
  }
}
</script>

<style lang="less">
.expand-content {
  padding: 20px 40px;
  display: flex;
  flex-wrap: wrap;
  /deep/.el-form-item {
    width: 50%;
    margin: 0;
    .el-form-item__label {
      margin-right: 70px;
      color: #99a9bf;
    }
  }
}
</style>
